<template>
  <div class="header_menu drag">
    <div class="left">
      <span>TestStudySystem-v{{ package_.version || '' }}</span>
      <img class="logo" src="@renderer/assets/Life-fillet.png" alt="" />
    </div>
    <div class="rigth">
      <div class="icon_ no-drag" @click="onTopping('window-top')">
        <el-tooltip
          :content="isAlwaysOnTop ? '置顶' : '取消置顶'"
          effect="light"
          placement="bottom"
        >
          <img v-if="isAlwaysOnTop" src="@renderer/assets/OnTop.png" alt="" />
          <img v-else src="@renderer/assets/ShowOnTop.png" alt="" />
        </el-tooltip>
      </div>
      <div class="icon_ no-drag" @click="WindowOpt('window-min')">
        <el-tooltip content="最小化" effect="light" placement="bottom">
          <img src="@renderer/assets/zuixoao.png" alt="" />
        </el-tooltip>
      </div>
      <div class="icon_ no-drag" @click="WindowOpt('window-max')">
        <el-tooltip :content="isMaximized ? '最大化' : '还原'" placement="bottom" effect="light">
          <img v-if="isMaximized" src="@renderer/assets/Maximize.png" alt="" />
          <img v-else src="@renderer/assets/Minimize.png" alt="" />
        </el-tooltip>
      </div>
      <div class="icon_ no-drag" @click="WindowOpt('window-close')">
        <el-tooltip content="关闭" placement="bottom" effect="light">
          <img src="@renderer/assets/close.png" alt="" />
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
let electron = null
let isMaximized = ref(true)
let isAlwaysOnTop = ref(true)
let package_ = reactive({})
if (window.electron) {
  electron = window.electron
}
if (window.package_) {
  package_ = window.package_
}
/**
 *
 * @param {窗口操作} cmd
 */
// eslint-disable-next-line no-unused-vars
async function WindowOpt(cmd) {
  if (electron) {
    electron.ipcRenderer.send(cmd, '')
  }
}
/**
 *
 * @param {窗口操作} cmd
 */
// eslint-disable-next-line no-unused-vars
async function onTopping(cmd) {
  if (electron) {
    electron.ipcRenderer.send(cmd, '')
  }
}
// eslint-disable-next-line vue/no-async-in-computed-properties, vue/return-in-computed-property
onMounted(async () => {
  if (electron) {
    electron.ipcRenderer.on('window-top', function (event, arg) {
      isAlwaysOnTop.value = arg
    })
    electron.ipcRenderer.on('window-max', function (event, arg) {
      isMaximized.value = arg
    })
  }
})
</script>

<style lang="less">
.header_menu {
  user-select: none;
  background-color: rgb(58, 118, 198);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.left {
  display: flex;
  align-items: center;
  color: white;
  padding-left: 10px;
  .logo {
    position: relative;
    width: 25px;
    height: 25px;
    left: 5px;
  }
}
.rigth {
  display: flex;
  align-items: center;
  justify-content: end;
  // rgb(67, 192, 88)

  .icon_:hover {
    background-color: rgb(230, 231, 232);
  }

  .icon_:nth-child(4):hover {
    background-color: rgb(240, 74, 62) !important;
  }

  .icon_ {
    padding: 8px;

    img {
      width: 15px;
      height: 15px;
    }
  }
}
</style>
